<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动端事件</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
<h3>M端事件</h3>
<p>
    移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。 <br>
    触屏事件 touch（也称触摸事件），Android 和 IOS 都有。 <br>
    touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔) 对屏幕或者触控板操作
</p>

<h4>常见的触屏事件如下：</h4>
<pre style="font-size: 22px;">
    触屏事件 touch事件        说明
    touchstart          手指触摸到一个DOM元素时触发
    touchend            手指从一个手指上离开时触发
    touchmove           手指在一个DOM上滑动时触发
</pre>
<p>
    特别说明: 这里讲的是 移动端 特有的DOM元素事件, 普通PC不适用 (了解下)
</p>
<hr>

<!--演示-->
<div>盒子</div>
<script>
    // 获取DOM元素
    const div盒子 = document.querySelector('div')
    // 1. 触摸
    div盒子.addEventListener('touchstart', function () {
        console.log('触碰盒子') // 控制台看信息
    })
    // 2. 离开
    div盒子.addEventListener('touchend', function () {
        console.log('松开盒子')
    })
    // 3. 移动
    div盒子.addEventListener('touchmove', function () {
        console.log('触碰，移动盒子')
    })
</script>

</body>
</html>